<script setup lang="ts">
import { ref, reactive, toRefs, watch, onMounted, computed, nextTick } from 'vue';
import useStore from '@/stores';
import HelpIcon from '@/components/HelpIcon/HelpIcon.vue';
import Dialog from '@/components/Dialog/Dialog.vue';
import { traduction } from '@/utils/language';
import { deepClone, showElMessage } from '@/utils/utils';
import { resetPowerCapping, setPower } from '../../services/power.services';
import { rangeVerification } from '@/validators/validation-functions';
import Schema from 'async-validator';
import { loading, getStoreData } from '@/utils/composition';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';
import $http from '@/utils/http-service';
import { reqPath } from '@/api/reqPath';
import { IconCaretDown } from '@computing/opendesign-icons';

const store = useStore();
// 系统锁定状态
const isSystemLock = computed(() => {
  return store.state.glob.systemLocked;
});
const fanSupported = computed(() => {
  return getStoreData('loct', 'fanspt');
});
const isArm = getStoreData('loct', 'armspt');
const isMultihost = getStoreData('loct', 'multihost');
const isPrivileges = checkPrivil(UserPrivil.powerControl);
const props = defineProps({
  data: {
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  },
  options: {
    required: false,
    type: Object,
    default: () => {
      return {
        GPUsMetrics: [],
        NPUsMetrics: [],
        DPUsMetrics: [],
        SDIsMetrics: [],
      };
    },
  },
  value:{
    required: false,
    type: Object,
    default: () => {
      return {};
    },
  },
});

const emits = defineEmits(['reset', 'setPCIeValue']);

const isPowerCapSet = ref(false);
let unit = ref('W');
let statisticsCollected = ref('');
let saveBtn = ref(true);
let capOptions = reactive([
  {
    label: traduction('POWER_MODE_EQUIE'),
    value: 'Equal',
    disable: false,
    id: 1,
  },
  {
    label: traduction('POWER_MODE_PROP'),
    value: 'Proportion',
    disable: false,
    id: 2,
  },
]);
const powerCappingInfo = reactive({
  averageConsumedWatts: null,
  currentCPUPowerWatts: null,
  currentMemoryPowerWatts: null,
  currentFanPowerWatts: null,
  maxConsumedOccurred: '',
  maxConsumedWatts: null,
  powerConsumedWatts: null,
  statisticsCollected: '',
  totalConsumedPowerkWh: null,
  powerCapMode: null,
  powerLimit: {
    limitInWatts: null,
    limitState: '',
    maxLimitInWatts: null,
    minLimitInWatts: null,
    limitException: '',
    powerLimitExceptionSupported: false,
    powerLimitMode: '',
    powerLimitExceptionAllowableValues: [] as any[],
  },
});
const dialogRef = ref();
let configDialog = ref(false);

const labelValue = computed(() => props.value);
const dialogConfig = reactive({
  id: '',
  content: traduction('COMMON_ASK_OK'),
  title: traduction('ALARM_OK'),
});

const dialogTitleTip1 = ref('');
const dialogTitleTip2 = ref('');
const dialogTitleTip3 = traduction('POWER_CAPPING_CONFIG_INTRODUCTION');
const dialogTitleTip = ref('');

const capModes = reactive({
  value: '',
  show: false,
});

let editData: any = reactive({
  capState: false,
  capValue: '',
  limitException: '',
  capType: '',
});
let oldData: any = {};

let capLabel = ref(traduction('POWER_CAPPING_VALUE') + ' (W)');
let capValueTip = ref('');
let capfailureShow = ref(false);

const rules: any = reactive({
  capValue: {
    type: 'number',
    required: true,
    isInteger: true,
    min: 1,
    max: 20,
    message: traduction('VALID_POWER_CAPPING_VALUE_NOT_RANGE'),
    validator: rangeVerification,
    trigger: 'blur',
  },
});

const capfailureList = reactive([
  {
    label: traduction('POWER_LOG_ONLY'),
    value: 'LogEventOnly',
    text: traduction('POWER_AUTO_LOG'),
  },
  {
    label: traduction('POWER_NO_OPERATION'),
    value: 'NoAction',
    text: traduction('POWER_NOT_POWER_OFF'),
  },
  {
    label: traduction('POWER_OFF'),
    value: 'HardPowerOff',
    text: traduction('POWER_AUTO_POWER_OFF'),
  },
  {
    label: traduction('POWER_RESTART'),
    value: 'Reset',
    text: traduction('POWER_AUTO_RESTART'),
  },
]);

const failureToShow = ref<any[]>([]);
const capfailureText = computed(() => {
  let item = capfailureList.find(v => v.value === powerCappingInfo.powerLimit.limitException);
  return item?.text || '';
});
if (!isArm) {
  capfailureList.pop();
}

let validateRes = true;

let capValueTipShow = ref(false);

let validator: any = '';

function dialogClose(reason: any) {
  // 点击确认
  if (reason) {
    resetPowerCapping()
      .then(() => {
        dialogRef.value.hide();
        showElMessage('success', traduction('COMMON_SUCCESS'));
        setTimeout(() => {
          emits('reset');
        }, 1000);
      })
      .catch(() => {
        dialogRef.value.hide();
        showElMessage('error', traduction('COMMON_FAILED'));
      });
  } else {
    dialogRef.value.hide();
  }
}

function resetDialog() {
  dialogRef.value.show();
}

watch(
  () => props.data,
  newVal => {
    init(newVal);
  },
  { deep: true },
);

// 初始化
function init(newVal: any) {
  unit.value = newVal?.activeUnit;
  isPowerCapSet.value = newVal?.powerLimit?.powerCappingSupported;
  statisticsCollected.value = newVal?.statisticsCollected;
  Object.assign(powerCappingInfo, deepClone(newVal));
  capfailureShow.value = powerCappingInfo.powerLimit.powerLimitExceptionSupported ? true : false;
  failureToShow.value = capfailureList.filter(item =>
    powerCappingInfo.powerLimit.powerLimitExceptionAllowableValues.includes(item.value),
  );
  dialogTitleTip1.value = capfailureShow.value ? traduction('BIOS_CPU_TIP1') : '';
  dialogTitleTip2.value = capfailureShow.value ? traduction('BIOS_CPU_TIP2') : '';
  dialogTitleTip.value = `${dialogTitleTip1.value}\n${dialogTitleTip2.value}\n${dialogTitleTip3}`;
  const { minLimitInWatts, maxLimitInWatts } = powerCappingInfo.powerLimit;
  if (unit.value === 'W') {
    capLabel.value = traduction('POWER_CAPPING_VALUE') + ' (W)';
    capValueTip.value = traduction('VALID_RECOMMENDED_VALUE_RANGE_TIP1', [
      minLimitInWatts,
      maxLimitInWatts,
    ]);
    rules.capValue = {
      type: 'number',
      required: true,
      isInteger: true,
      min: minLimitInWatts || 1,
      max: maxLimitInWatts || 20,
      message: traduction('VALID_POWER_CAPPING_VALUE_NOT_RANGE'),
      validator: rangeVerification,
      trigger: 'blur',
    };
    validator = new Schema(rules);
  } else {
    capLabel.value = traduction('POWER_CAPPING_VALUE') + ' (BTU/h)';
    capValueTip.value = traduction('VALID_RECOMMENDED_VALUE_RANGE_TIP2', [
      minLimitInWatts,
      maxLimitInWatts,
    ]);
    rules.capValue = {
      type: 'number',
      required: true,
      isInteger: false,
      min: 1,
      max: maxLimitInWatts || 20,
      message: traduction('VALID_POWER_CAPPING_VALUE_NOT_RANGE'),
      validator: rangeVerification,
      trigger: 'blur',
    };
    validator = new Schema(rules);
  }
  setEditData();
}

function setEditData() {
  Object.assign(editData, {
    capState: powerCappingInfo.powerLimit.limitState ? true : false,
    capValue: powerCappingInfo.powerLimit.limitInWatts,
    limitException: powerCappingInfo.powerLimit.limitException,
    capType: powerCappingInfo.powerLimit.powerLimitMode || '',
  });
  oldData = deepClone(editData);
  const { powerCapMode } = powerCappingInfo;
  capModes.show = powerCapMode !== null && powerCapMode !== undefined ? true : false;
  capModes.value = capModes.show
    ? traduction('POWER_PROTECT_MODE')
    : traduction('POWER_USER_SET_MODE');
}

function closeDialog() {
  configDialog.value = false;
  Object.assign(editData, oldData);
}

function powerCapping() {
  configDialog.value = true;
  setTimeout(() => {
    setSaveBtnState();
  }, 0);
}

// 发生校验
function validate(key: string, value: boolean) {
  validateRes = value;
  setSaveBtnState();
}

// 输入框发生修改
function input() {
  validator
    .validate(editData)
    .then(() => {
      validateRes = true;
      setSaveBtnState();
    })
    .catch(() => {
      validateRes = false;
      setSaveBtnState();
    });
}

// 计算保存按钮的状态
function setSaveBtnState() {
  if (editData.capState && !validateRes && Number(editData.capValue) < 1) {
    saveBtn.value = true;
    return;
  }
  if (editData.capState !== oldData.capState) {
    if (!editData.capState) {
      saveBtn.value = false;
    } else if (
      (Number.isInteger(Number(editData.capValue)) &&
        Number(editData.capValue) >= 1 &&
        Number(editData.capValue) <= Number(powerCappingInfo.powerLimit.maxLimitInWatts)) ||
      validateRes
    ) {
      saveBtn.value = false;
    } else {
      saveBtn.value = true;
    }
  } else if (
    editData.limitException !== null &&
    editData.limitException !== oldData.limitException
  ) {
    saveBtn.value = false;
  } else if (
    editData.capState &&
    ((Number.isInteger(Number(editData.capValue)) &&
      Number(editData.capValue) >= 1 &&
      Number(editData.capValue) <= Number(powerCappingInfo.powerLimit.maxLimitInWatts)) ||
      validateRes) &&
    Number(editData.capValue) !== Number(oldData.capValue)
  ) {    
    saveBtn.value = false;
  } else if (editData.capType !== oldData.capType) {
    saveBtn.value = false;
  } else {
    saveBtn.value = true;
  }
}

// 点击保存
function save() {
  loading(true);
  let params: any = {};
  const powerLimit: any = {};
  if (editData.capState !== oldData.capState) {
    powerLimit['LimitState'] = editData.capState ? 'On' : 'Off';
  }

  if (editData.capState && editData.capValue !== oldData.capValue) {
    if (unit.value === 'W') {
      powerLimit['LimitInWatts'] = parseInt(String(editData.capValue), 10);
    } else {
      powerLimit['LimitInWatts'] = Math.ceil(Number(editData.capValue) * 0.293);
    }
  }
  if (
    powerCappingInfo.powerLimit.limitException !== null &&
    editData.limitException !== oldData.limitException
  ) {
    powerLimit['LimitException'] = editData.limitException;
  }

  if (editData.capType !== oldData.capType) {
    powerLimit['PowerLimitMode'] = editData.capType;
  }

  if (JSON.stringify(powerLimit) !== '{}') {
    params = {
      PowerLimit: powerLimit,
    };
  }
  setPower(params)
    .then((res: any) => {
      configDialog.value = false;
      showElMessage('success', traduction('COMMON_SUCCESS'));
      emits('reset');
    })
    .catch((err: any) => {
      showElMessage('error', traduction('COMMON_FAILED'));
    })
    .finally(() => {
      loading(false);
    });
}

function pcieChange(value:any, type: string) {
  emits('setPCIeValue', {value, type});
}

</script>

<template>
  <div id="powerCapping" class="power-capping-info">
    <div class="card-header">
      <div class="header-left">
        <span class="title">{{ $t('POWER_CAPPING_INFO') }}</span>
      </div>
      <div class="header-right">
        <div id="statisticsCollected" class="text">
          <span>{{ $t('POWER_STATISTICS_STARTTIME') }}</span>
          <span>{{ statisticsCollected }}</span>
        </div>
        <div class="btn">
          <el-button
            v-if="isPrivileges"
            id="powerCappingReset"
            v-privil.base.powerControl
            :disabled="isSystemLock"
            @click="resetDialog"
          >
            {{ $t('POWER_RECOLLECT_STATISTICS') }}
          </el-button>
          <el-button
            v-if="isPrivileges && isPowerCapSet"
            id="powerCappingSetting"
            v-privil.base.powerControl
            :disabled="isSystemLock"
            @click="powerCapping"
          >
            {{ $t('POWER_CAPPING_CONFIG') }}
          </el-button>
          <Dialog ref="dialogRef" :config="dialogConfig" @close="dialogClose"></Dialog>

          <!-- 功率封顶配置 的弹窗 -->
          <div v-reqKeepAlive.dialog>
            <el-dialog
              v-if="configDialog"
              v-model="configDialog"
              class="power-config"
              width="432px"
              @close="closeDialog"
            >
              <el-form
                :model="editData"
                :rules="rules"
                label-width="176"
                label-position="left"
                :validate-on-rule-change="false"
                @validate="validate"
              >
                <!-- 功率封顶使能状态 -->
                <el-form-item class="small-item" :label="$t('POWER_CAPPING_STATUS')">
                  <el-switch id="capState" v-model="editData.capState" @change="setSaveBtnState" />
                </el-form-item>
                <!-- multihost功耗封顶模式 -->
                <el-form-item v-show="editData.capType" class="small-item" :label="$t('POWER_CAPPING_MODE')">
                  <el-radio-group id="recordLevel" v-model="editData.capType">
                    <el-radio
                      v-for="(item, index) in capOptions"
                      :key="item.id"
                      v-addId.radio="'record' + index"
                      :label="item.value"
                      @change="setSaveBtnState"
                    >
                      {{ item.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item v-show="editData.capState" :label="capLabel" prop="capValue">
                  <el-tooltip
                    v-model:visible="capValueTipShow"
                    class="box-item"
                    :content="capValueTip"
                    placement="right"
                    trigger="focus"
                    :persistent="false"
                    trigger-keys
                  >
                    <el-input
                      v-model="editData.capValue"
                      v-addId.input="'capValue'"
                      @input="input"
                      @focus="capValueTipShow = true"
                      @blur="capValueTipShow = false"
                    />
                  </el-tooltip>
                </el-form-item>
                <el-form-item v-show="capfailureShow" class="select-form-item">
                  <template #label>
                    <span>{{ $t('POWER_CAPPING_FAILURE_POLICY') }}</span>
                    <HelpIcon
                      :append-to-body="true"
                      :placement="'top'"
                      :tips="$t('POWER_CAPPING_INVALID_TIP')"
                    />
                  </template>

                  <el-select
                    v-model="editData.limitException"
                    v-addId.select="'capfailure'"
                    :teleported="true"
                    :suffix-icon="IconCaretDown"
                    @change="setSaveBtnState"
                  >
                    <template v-for="item in failureToShow" :key="item.value">
                      <el-option
                        :id="'capfailure' + item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                        <div class="item">{{ item.label }}</div>
                      </el-option>
                    </template>
                  </el-select>
                </el-form-item>
              </el-form>
              <template #title>
                <span class="dialog-title">{{ $t('POWER_CAPPING_CONFIG') }}</span>
                <HelpIcon
                  pop-class="cappingConfigTip"
                  :append-to-body="true"
                  :placement="'right'"
                  :tips="dialogTitleTip"
                />
              </template>
              <template #footer>
                <span class="dialog-footer">
                  <el-button
                    id="powerCapSave"
                    :disabled="saveBtn"
                    size="small"
                    type="primary"
                    @click="save"
                  >
                    {{ $t('COMMON_SAVE') }}
                  </el-button>
                  <el-button id="powerCapCancel" size="small" @click="closeDialog">
                    {{ $t('COMMON_CANCEL') }}
                  </el-button>
                </span>
              </template>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <!-- 信息列表 -->
    <div class="card-content">
      <!-- 当前功率 -->
      <div class="info-item info-item-4">
        <div class="item-inner">
          <div class="name">
            <span>{{ $t('POWER_CURRENT') }}</span>
            <span class="unit">({{ unit }})</span>
          </div>
          <div class="number">
            {{
              powerCappingInfo?.powerConsumedWatts !== null
                ? powerCappingInfo?.powerConsumedWatts
                : '--'
            }}
          </div>
          <div
            v-if="
              powerCappingInfo.powerLimit.limitInWatts !== null &&
                powerCappingInfo.powerLimit.limitState
            "
            class="tip-list"
          >
            <span>
              {{ $t('POWER_TO', [powerCappingInfo.powerLimit.limitInWatts + unit]) }}
            </span>
            <span>
              {{ capfailureText }}
            </span>
          </div>
          <div v-else class="tip-list">
            <span v-if="isPowerCapSet">
              {{ $t('POWER_MODE_LOFF') }}
            </span>
          </div>
        </div>
      </div>
      <!-- 系统峰值功率 -->
      <div class="info-item info-item-4">
        <div class="item-inner">
          <div class="name">
            <span>{{ $t('POWER_SYSTEM_PEAK_POWER') }}</span>
            <span class="unit">({{ unit }})</span>
          </div>
          <div class="number">
            {{
              powerCappingInfo?.maxConsumedWatts !== null
                ? powerCappingInfo?.maxConsumedWatts
                : '--'
            }}
          </div>

          <div id="generTime" class="tip-list">
            <div>
              {{ $t('POWER_PEAK_OCCURRED') }}
              <span>{{ powerCappingInfo.maxConsumedOccurred }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 系统累积耗电量 -->
      <div class="info-item info-item-4">
        <div class="item-inner">
          <div class="name">
            <span>{{ $t('POWER_SYSTEM_CUMULATIVE_POWER_CONSUMPTION') }}</span>
            <span class="unit">({{ unit === 'W' ? 'KWh' : 'BTU' }})</span>
          </div>
          <div class="number">
            {{
              ((powerCappingInfo?.totalConsumedPowerkWh || powerCappingInfo.totalConsumedPowerkWh === 0) && powerCappingInfo.totalConsumedPowerkWh !== null)
                ? Number(powerCappingInfo?.totalConsumedPowerkWh).toFixed(1)
                : '--'
            }}
          </div>
        </div>
      </div>
      <!-- 系统平均功率 -->
      <div class="info-item info-item-4">
        <div class="item-inner">
          <div class="name">
            <span>{{ $t('POWER_SYSTEM_AVG_POWER') }}</span>
            <span class="unit">({{ unit }})</span>
          </div>
          <div class="number">
            {{
              powerCappingInfo?.averageConsumedWatts !== null
                ? powerCappingInfo?.averageConsumedWatts
                : '--'
            }}
          </div>
        </div>
      </div>
    </div>
    <div class="card-content">
      <!-- CPU当前功耗 -->
      <div class="info-item info-item-3">
        <div class="item-inner">
          <div class="name">
            <span>{{ $t('POWER_CPU_CURRT_POWER_CONSUMPTION') }}</span>
            <span class="unit">({{ unit }})</span>
          </div>
          <div class="number">
            {{
              powerCappingInfo?.currentCPUPowerWatts || powerCappingInfo?.currentCPUPowerWatts === 0
                ? powerCappingInfo?.currentCPUPowerWatts
                : '--'
            }}
          </div>
        </div>
      </div>
      <!-- 内存当前功耗 -->
      <div class="info-item info-item-3">
        <div class="item-inner">
          <div class="name">
            <span>{{ $t('POWER_MEMORY_CURRT_POWER_CONSUMPTION') }}</span>
            <span class="unit">({{ unit }})</span>
          </div>
          <div class="number">
            {{
              powerCappingInfo?.currentMemoryPowerWatts ||
                powerCappingInfo?.currentMemoryPowerWatts === 0
                ? powerCappingInfo?.currentMemoryPowerWatts
                : '--'
            }}
          </div>
        </div>
      </div>
      <!-- 风扇当前功率 -->
      <div v-if="!isMultihost && fanSupported" class="info-item info-item-3">
        <div class="item-inner">
          <div class="name">
            <span>{{ $t('POWER_FAN_CURRT_POWER') }}</span>
            <span class="unit">({{ unit }})</span>
          </div>
          <div class="number">
            {{
              powerCappingInfo?.currentFanPowerWatts || powerCappingInfo?.currentFanPowerWatts === 0
                ? powerCappingInfo?.currentFanPowerWatts
                : '--'
            }}
          </div>
        </div>
      </div>
    </div>
    <!-- PCIe列表 -->
    <div id="pcieBox" class="card-content">
      <div v-if="props.options.GPUsMetrics.length" id="gpuBox" class="info-item info-item-4 low-height">
        <div class="item-inner">
          <div class="pcie-name name">
            <div id="gpuBeforeText" class="before-text">
              <el-tooltip placement="top" :content="`GPU${labelValue.gpu}`">
                <el-select
                  v-model="labelValue.gpu"
                  v-addId.select="'gpuSelect'"
                  :disabled="isSystemLock"
                  :teleported="false"
                  :suffix-icon="PullDownTriangle"
                  @change="pcieChange($event, 'gpu')"
                >
                  <el-option
                    v-for="(item, index) in props.options.GPUsMetrics"
                    :id="`gpu${index}`"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  >
                    <el-tooltip placement="top" :content="item.label">
                      <span :id="`gpuLabel${index}`">{{ item.label }}</span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-tooltip>
            </div>
            <span id="gpuPowerText" class="current-power">{{ $t('POWER_CURRT_POWER') }}</span>
            <span id="gpuUnit" class="unit">({{ unit }})</span>
          </div>
          <div id="gpuPower" class="number">
            {{
              powerCappingInfo?.currentGPUPowerWatts ||
                powerCappingInfo?.currentGPUPowerWatts === 0
                ? powerCappingInfo?.currentGPUPowerWatts
                : '--'
            }}
          </div>
        </div>
      </div>
      <div v-if="props.options.NPUsMetrics.length" id="npuBox" class="info-item info-item-4 low-height">
        <div class="item-inner">
          <div class="pcie-name name">
            <div id="npuBeforeText" class="before-text">
              <el-tooltip placement="top" :content="`NPU${labelValue.npu}`">
                <el-select
                  v-model="labelValue.npu"
                  v-addId.select="'npuSelect'"
                  :disabled="isSystemLock"
                  :teleported="false"
                  :suffix-icon="PullDownTriangle"
                  @change="pcieChange($event, 'npu')"
                >
                  <el-option
                    v-for="(item, index) in props.options.NPUsMetrics"
                    :id="`npu${index}`"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  >
                    <el-tooltip placement="top" :content="item.label">
                      <span :id="`npuLabel${index}`">{{ item.label }}</span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-tooltip>
            </div>
            <span id="npuPowerText" class="current-power">{{ $t('POWER_CURRT_POWER') }}</span>
            <span id="npuUnit" class="unit">({{ unit }})</span>
          </div>
          <div id="npuPower" class="number">
            {{
              powerCappingInfo?.currentNPUPowerWatts || powerCappingInfo?.currentNPUPowerWatts === 0
                ? powerCappingInfo?.currentNPUPowerWatts
                : '--'
            }}
          </div>
        </div>
      </div>
      <div v-if="props.options.DPUsMetrics.length" id="dpuBox" class="info-item info-item-4 low-height">
        <div class="item-inner">
          <div class="pcie-name name">
            <div id="dpuBeforeText" class="before-text">
              <el-tooltip placement="top" :content="`DPU${labelValue.dpu}`">
                <el-select
                  v-model="labelValue.dpu"
                  v-addId.select="'dpuSelect'"
                  :disabled="isSystemLock"
                  :teleported="false"
                  :suffix-icon="PullDownTriangle"
                  @change="pcieChange($event, 'dpu')"
                >
                  <el-option
                    v-for="(item, index) in props.options.DPUsMetrics"
                    :id="`dpu${index}`"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  >
                    <el-tooltip placement="top" :content="item.label">
                      <span :id="`dpuLabel${index}`">{{ item.label }}</span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-tooltip>
            </div>
            <span id="dpuPowerText" class="current-power">{{ $t('POWER_CURRT_POWER') }}</span>
            <span id="dpuUnit" class="unit">({{ unit }})</span>
          </div>
          <div id="dpuPower" class="number">
            {{
              powerCappingInfo?.currentDPUPowerWatts || powerCappingInfo?.currentDPUPowerWatts === 0
                ? powerCappingInfo?.currentDPUPowerWatts
                : '--'
            }}
          </div>
        </div>
      </div>
      <div v-if="props.options.SDIsMetrics.length" id="sdiBox" class="info-item info-item-4 low-height">
        <div class="item-inner">
          <div class="pcie-name name">
            <div id="sdiBeforeText" class="before-text">
              <el-tooltip placement="top" :content="`SDI${labelValue.sdi}`">
                <el-select
                  v-model="labelValue.sdi"
                  v-addId.select="'sdiSelect'"
                  :disabled="isSystemLock"
                  :teleported="false"
                  :suffix-icon="PullDownTriangle"
                  @change="pcieChange($event, 'sdi')"
                >
                  <el-option
                    v-for="(item, index) in props.options.SDIsMetrics"
                    :id="`sdi${index}`"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  >
                    <el-tooltip placement="top" :content="item.label">
                      <span :id="`sdiLabel${index}`">{{ item.label }}</span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-tooltip>
            </div>
            <span id="sdiPowerText" class="current-power">{{ $t('POWER_CURRT_POWER') }}</span>
            <span id="sdiUnit" class="unit">({{ unit }})</span>
          </div>
          <div id="sdiPower" class="number">
            {{
              powerCappingInfo?.currentSDIPowerWatts || powerCappingInfo?.currentSDIPowerWatts === 0
                ? powerCappingInfo?.currentSDIPowerWatts
                : '--'
            }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.power-capping-info {
  .card-header {
    height: 32px;
    line-height: 32px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    .header-left,
    .header-right {
      display: inline-block;
    }

    .text {
      font-size: 12px;
      color: var(--o-text-color-secondary);
      margin-right: 24px;
      display: inline-block;
    }
    .btn {
      display: inline-block;
    }
  }
  .card-content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .info-item-4 {
      width: calc(100% / 4);
      .item-inner {
        min-height: 136px;
      }
    }

    .info-item-3 {
      width: calc(100% / 3);
      .item-inner {
        min-height: 112px;
      }
    }

    .low-height{
      .item-inner {
        min-height: 112px;
      }
    }

    .info-item {
      position: relative;
      display: flex;
      flex: 1 1 0;
      align-items: stretch;
      vertical-align: top;
      &:first-child {
        &::before {
          width: 0;
        }
      }
      .item-inner {
        background: var(--o-bg-color-light);
        border-radius: 4px;
        margin: 4px;
        padding: 24px;
        width: 100%;
        .name {
          color: var(--o-text-color-primary);
          font-size: 14px;
          line-height: 22px;
        }
        .pcie-name{
          display: flex;
          align-items: center;
          .before-text{
            display: flex;
            font-size: 14px;
            align-items: center;
            :deep(.el-select__wrapper){
              background: var(--o-bg-color-light);
              .el-select__selected-item{
                font-size: 14px;
              }
              min-width: 60px;
              padding: 0px;
              box-shadow: none;
            }
            :deep(.el-select-dropdown__item){
              padding-left: 0px;
              padding-right: 0px;
              text-align: center;
            }
          }
          .current-power{
            margin-left: 5px;
          }
          .unit{
            margin-bottom: 0px;
          }
        }
        .number {
          height: 40px;
          font-size: 32px;
          font-weight: 900;
          color: var(--o-text-color-primary);
          line-height: 40px;
          margin-bottom: 8px;
        }
        .unit {
          height: 16px;
          color: var(--o-text-color-primary);
          background: none;
          line-height: 16px;
          margin-bottom: 8px;
        }
        .tip-list {
          color: var(--o-text-color-tertiary);
          line-height: 16px;
        }
      }
    }
  }
  .title {
    display: inline-block;
    height: 24px;
    font-size: 16px;
    font-weight: 600;
    color: var(--o-text-color-primary);
    text-align: center;
    line-height: 24px;
  }
  .el-dialog__header {
    .icon-help-container {
      line-height: 24px;
      margin-left: 8px;
    }
  }

  .dialog-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--o-text-color-primary);
    line-height: 24px;
  }
  .el-form-item {
    .icon-help-container {
      margin-left: 8px;
    }

    :deep(.el-form-item__label:before) {
      display: none;
    }
  }
}
</style>

<style lang="scss" scoped>
:deep(.power-config) {
  .el-dialog__body {
    .el-form-item:nth-last-child(1) {
      margin-bottom: 0;
    }
  }
  .small-item {
    height: 16px;
    .el-form-item__label {
      padding-top: 0;
      padding-bottom: 0;
    }

    .el-form-item__content {
      line-height: 16px;
    }
    #recordLevel{
      label{
        height: 16px;
      }
    }
  }

  .el-select {
    width: 100%;
  }
}
.cappingConfigTip {
  max-width: 376px;
}

:deep(.el-dialog__body) {
  .select-form-item {
    display: flex;
    align-items: center;

    .el-form-item__label {
      max-width: 180px;
      padding-top: 0;
      padding-bottom: 0;
      display: flex;
      align-items: center;
    }
  }
}
</style>
